<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>08 - OL6加载天地图WMTS服务展示地图</title>
    <!--    <script src='../lib/ol4/ol4.js'></script>-->
    <script src='../lib/ol6.4.3/ol.js'></script>
    <!--        <script src='../lib/ol6.12.0/ol.js'></script>-->
    <!--    <script src='../lib/ol6.15.1/ol.js'></script>-->
    <script src='../lib/proj4/proj4.js'></script>
    <!--        <link rel="stylesheet" href="../css/ol4/ol.css">-->
    <!--    <link rel="stylesheet" href="../css/ol6.14.1/ol.css">-->
    <link rel='stylesheet' href='../css/main.css'>
</head>
<body>
<div id='map'></div>
</body>
<script>
	const projection = ol.proj.get('EPSG:4326');
	const tileSize = 256;
	const projectionExtent = projection.getExtent();
	const origin = [-180.0, 90.0];
	const size = ol.extent.getWidth(projectionExtent) / tileSize;
	let resolutions = [];
	let matrixIds = [];
	for (let z = 0; z < 20; ++z) {
		resolutions[z] = size / Math.pow(2, z);
		matrixIds[z] = z;
	}

	resolutions = [
		1.40625,
		0.703125,
		0.3515625,
		0.17578125,
		0.087890625,
		0.0439453125,
		0.02197265625,
		0.010986328125,
		0.0054931640625,
		0.00274658203125,
		0.001373291015625,
		0.0006866455078125,
		0.00034332275390625,
		0.000171661376953125,
		0.0000858306884765625,
		0.00004291534423828125,
		0.000021457672119140625,
		0.000010728836059570312,
		0.000005364418029785156,
		0.000002682209014892578
	];

	const maxZoom = 7;
	const minZoom = 4;
	const zoom = 5;

	console.log('=========resolutions:', resolutions);
	// resolutions = [0.087890625];//resolutions.slice(3, 5);
	// matrixIds = [4];//matrixIds.slice(3, 5);

	console.log(resolutions, matrixIds);

	const tileGrid = new ol.tilegrid.WMTS({
		origin,
		resolutions,//: resolutions.slice(4, maxZoom + 1),
		extent: projectionExtent,
		matrixIds//: matrixIds.slice(4, maxZoom + 1)
	});

	const url = `http://t0.tianditu.gov.cn/vec_c/wmts?tk=a6bf5a2496115f58481b947040c83ae3`;

	const wmtsSource = new ol.source.WMTS({
		url,
		layer: 'vec',
		matrixSet: 'c',
		format: 'tiles',
		projection,
		tileGrid,
		style: 'default',
		wrapX: false
	});
	// 图层
	const baseLayer = new ol.layer.Tile({
		source: wmtsSource
	});

	const points = [
		[0, 0]
	];
	const centerPoint = points[0];

	const view = new ol.View({
		constrainResolution: true,
		center: centerPoint,
		projection,
		zoom,
		minZoom,
		maxZoom
		// resolutions
	});

	const map = new ol.Map({
		layers: [
			baseLayer
		],
		target: 'map',
		view
	});

	console.log(view.getResolution());

</script>
</html>